<!--
 * @Author: zhuxiaoyi
 * @Date: 2022-09-18 18:18:17
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2023-05-05 15:48:20
 * @Description: 
-->
<template>
    <div id="mapCon" :style="`height: ${viewHeight}px`"></div>
</template>

<script>

import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
export default defineComponent({
    name: 'normalMap',
    props: {
        currentRow: {
            type: Object,
            required: true,
        },
        geoserverURL: {
            type: String,
            required: true,
        }
    },
    emits: [''],
    components: {},
    setup(props, context) {
        const deployment_target = import.meta.env.VITE_DEPLOYMENT_TARGET;
        var map = null;
        const data = reactive({
            viewHeight: window.innerHeight - 60,
            position: ''
        })
        const createMap = function () {
            var image, nano, baseLayers;
            var normalm = L.tileLayer.chinaProvider('TianDiTu.Normal.Map', {
                maxZoom: 18,
                minZoom: 1
            })
            var imgm = L.tileLayer.chinaProvider('TianDiTu.Satellite.Map', {
                maxZoom: 18,
                minZoom: 1
            })
            var imga = L.tileLayer.chinaProvider('TianDiTu.Satellite.Annotion', {
                maxZoom: 18,
                minZoom: 1
            });
            //http://192.168.12.16:5536/tiles/qh_rs/{z}/{x}/{y}.png  
            var backLayer = L.tileLayer('http://192.168.12.16:5536/tiles/qh_rs/{z}/{x}/{y}.png', {
                maxZoom: 14,
                minZoom: 1,
            })
            //http://192.168.12.16:5536/tiles/qh_label/{z}/{x}/{y}.png
            var nanoLayer = L.tileLayer('http://192.168.12.16:5536/tiles/qh_label/{z}/{x}/{y}.png', {
                maxZoom: 14,
                minZoom: 1,
                tms:true
            })
            var wmsLayer = L.tileLayer(`${props.geoserverURL}/geoserver/gwc/service/tms/1.0.0/result%3A${props.currentRow.url.split(':')[1]}@EPSG%3A900913@png/{z}/{x}/{y}.png`, {
                maxZoom: 18,
                minZoom: 1,
                reuseTiles: true,
                tms: true
            })
            var three = L.layerGroup([wmsLayer]);
            var normal = L.layerGroup([normalm])
            if (deployment_target == 'sjy') {
                image = L.layerGroup([backLayer]);
                nano = L.layerGroup([nanoLayer]);
                baseLayers = {
                    "影像": image,
                }
            } else {
                image = L.layerGroup([imgm]);
                nano = L.layerGroup([imga]);
                baseLayers = {
                    "影像": image,
                    "地图": normal
                }
            }
            var overlayLayers = {
                "成果": three,
                "标注": nano
            }
            document.getElementById('mapCon').innerHTML = "<div id='map' style='width: 100%; height: 100%;'></div>";
            if (props.currentRow.posjson !== '' && props.currentRow.posjson !== null) {
                data.position = JSON.parse(props.currentRow.posjson)
            } else {
                data.position = {
                    center: [34, 92.8],
                    zoom: 7,
                }
            }
            map = L.map("map", {
                center: data.position.center,
                zoom: data.position.zoom,
                layers: [image, three, nano],
                zoomControl: true
            }, 100);
            L.control.layers(baseLayers, overlayLayers).addTo(map);
        }
        onMounted(() => {})
        return {
            ...toRefs(data),
            createMap
        }
    },
})

</script>
<style lang="scss" scoped></style>
<style lang="scss">
.leaflet-control-attribution {
    display: hidden
}
</style>